<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('主子表提交')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;

        }

    </style>

</head>


<body class="gray-bg">

<div class="main-content">
    <form id="form-add" class="form-horizontal">

        <input name="companyId" type="hidden" id="companyId"/>
        <input name="programId" type="hidden" id="programId"/>
        <input name="programName" type="hidden" id="programName"/>

        <h4 class="form-header h4"><span class="h4" th:text="${programName}"></span> &nbsp;&nbsp; 检测数据</h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i>
                </button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus">
                    删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>

<script th:inline="javascript">

    /* 模块前缀url */
    var prefix = ctx + "concreteManage";

    /* 初始化 数据 */
    var buildingNumber = [[${buildingNumber}]];
    var floorNumber = [[${floorNumber}]];
    var companyId = [[${companyId}]];
    var programId = [[${programId}]];
    var programName = [[${programName}]];
    // 定义数组
    var arr = new Array();
    var v = new Array();

    /* 初始化 方法 */
    $(function () {
        $("#companyId").val(companyId);
        $("#programId").val(programId);
        $("#programName").val(programName);

        var options = {
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'buildingNumber',
                    align: 'center',
                    title: '工程部位(楼号)',
                    formatter: function (value, row, index) {
                        var html = '';
                        html += '<select class="form-control building"  name="concrete[' + index + '].buildingNumber" id="buildingNumber' + index + '"><option value="">请选择</option>';
                        for (var i = 0; i < buildingNumber.length; i++) {
                            html += '<option value="'+buildingNumber[i].id+'"';
                            if(buildingNumber[i].id==value){
                                html +=' selected ';
                            }
                            html +='>'+buildingNumber[i].name+'</option>';
                        }
                        html += '</select>';
                        return html;
                    }
                },
                {
                    field: 'floorNumber',
                    align: 'center',
                    title: '结构部位(楼层)',
                    formatter: function (value, row, index) {
                        var html = '';
                        html += '<select class="form-control floor"  name="concrete[' + index + '].floorNumber" id="floorNumber' + index + '"><option value="">请选择</option>';
                        for (var i = 0; i < floorNumber.length; i++) {
                            html += "<option value='" + floorNumber[i].dictCode + "'";
                            if(floorNumber[i].dictCode==value){
                                html +=' selected ';
                            }
                            html +=">" + floorNumber[i].dictValue + "</option>";
                        }
                        html += '</select>';
                        return html;
                    }
                },
                {
                    field: 'pouringTime',
                    align: 'center',
                    title: '浇筑日期',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control testff" type="text" placeholder="yyyy-MM-dd" id="pouringTime' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].pouringTime' + '"  autocomplete=\'off\' onchange="getAge(' + index + ')">', index, value);
                        return html;
                    }
                },
                {
                    field: 'checkTime',
                    align: 'center',
                    title: '检测日期',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control testf" type="text" placeholder="yyyy-MM-dd" id="checkTime' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].checkTime' + '"  autocomplete=\'off\' onchange="getAge(' + index + ')">', index, value);
                        return html;
                    }
                },
                {
                    field: 'age',
                    align: 'center',
                    title: '龄期',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control" type="text" id="age' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].age' + '"  readonly>', index, value);
                        return html;
                    }
                },
                {
                    field: 'designLabel',
                    align: 'center',
                    title: '设计标号(Mpa)',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control" onkeyup="value=value.replace(/[^\\d]/g,\'\')" id="designLabel' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].designLabel' + '"  autocomplete=\'off\'>', index, value);
                        return html;
                    }
                },
                {
                    field: 'averIntensity',
                    align: 'center',
                    title: '强度平均(Mpa)',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control" id="averIntensity' + index + '" onblur="changeData(' + index + ')" value="' + value + '" name="' + 'concrete[' + index + '].averIntensity' + '"  autocomplete=\'off\' onkeyup=\"clearNoNum(this)\">', index, value);
                        return html;
                    }
                },
                {
                    field: 'minIntensity',
                    align: 'center',
                    title: '强度最小(Mpa)',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='concrete[%s].minIntensity' value='%s' autocomplete='off' onkeyup=\"clearNoNum(this)\">", index, value);
                        return html;
                    }
                },
                {
                    field: 'testPerson',
                    align: 'center',
                    title: '检测人员',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='concrete[%s].testPerson' value='%s' autocomplete='off'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'note',
                    align: 'center',
                    title: '碳化深度',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='concrete[%s].note' value='%s' autocomplete='off'>", index, value);
                        return html;
                    }
                }
            ]
        };
        $.table.init(options);
    });

    /* 龄期 */
    function getAge(index) {
        if ($("#" + 'pouringTime' + index).val() != '' && $("#" + 'checkTime' + index).val() != '') {
            // 判断检测日期大于浇筑日期
            var flag = tab($("#" + 'pouringTime' + index).val(),$("#" + 'checkTime' + index).val())
            console.log(flag)
            if(flag == true){
                var age = GetNumberOfDays($("#" + 'pouringTime' + index).val(),$("#" + 'checkTime' + index).val())
                $("#" + 'age' + index).attr("value",age)
            }else{
                $.modal.alertWarning("检测日期要大于浇筑日期");
                return
            }
        }else{
            $("#" + 'age' + index).attr("value","")
        }
    }

    /* 初始化 日期*/
    //function bindDatetimepicker() {
    $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
        $("input[name$='pouringTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true,
            pickerPosition: 'bottom-right'
        });

        $("input[name$='checkTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true,
            pickerPosition: 'bottom-right'
        });
    });
    //}

    /* 日期相减 */
    function GetNumberOfDays(date1,date2){//获得天数
        //date1：开始日期，date2结束日期
        var a1 = Date.parse(new Date(date1));
        var a2 = Date.parse(new Date(date2));
        var day = parseInt((a2-a1)/ (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数
        return day
    };

    /* 日期比较 */
    function tab(date1,date2){
        var oDate1 = new Date(date1);
        var oDate2 = new Date(date2);
        if(oDate1.getTime() > oDate2.getTime()){
            return false;
        } else {
            return true;
        }
    }

    /* 添加行 */
    function addColumn() {

        // var box = document.getElementsByClassName("building");
        // var box1 = document.getElementsByClassName("floor");
        //
        // for (var i = 0; i < box.length; i++) {
        //     var ob = new Object();
        //     ob.building = $("#" + box[i].id).val();
        //     ob.floor = $("#" + box1[i].id).val();
        //     v.push(ob);
        // }
        //
        //
        // // 获取表格的所有内容行
        // var count = $("#" + table.options.id).bootstrapTable('getData').length;
        // sub.editColumn();


        //$("#" + table.options.id).bootstrapTable('insertRow', {
        //    index: count,
            var row={
                // index: $.table.serialNumber(count),
                buildingNumber: "",
                floorNumber: "",
                pouringTime: "",
                checkTime:"",
                designLabel: "",
                age: "",
                averIntensity: "",
                minIntensity: "",
                testPerson:"",
                note: "",
            }
        //});
        sub.addColumn(row);
        // /* 日期初始化 */
        // bindDatetimepicker();
        //
        // for (var j = 0; j < v.length; j++) {
        //     $("#" + box[j].id).val(v[j].building);
        //     $("#" + box1[j].id).val(v[j].floor);
        //
        // }
        // v = [];
    }

    /* 删除行:为了初始化日期,否则日期组件不生效 */
    // function delColumn(column) {
    //     sub.editColumn();
    //     var subColumn = $.common.isEmpty(column) ? "index" : column;
    //     var ids = $.table.selectColumns(subColumn);
    //     var row = $("#bootstrap-table").bootstrapTable('getSelections');
    //     if (ids.length == 0) {
    //         $.modal.alertWarning("请至少选择一条记录");
    //         return;
    //     }
    //
    //     var box = document.getElementsByClassName("building");
    //     var box1 = document.getElementsByClassName("floor");
    //
    //     for (var i = 0; i < box.length; i++) {
    //         var ob = new Object();
    //         ob.building = $("#" + box[i].id).val();
    //         ob.floor = $("#" + box1[i].id).val();
    //         ob.id = i + 1;
    //         arr.push(ob);
    //     }
    //
    //
    //     // sub.editColumn();
    //
    //
    //     $("#" + table.options.id).bootstrapTable('remove', {field: subColumn, values: ids});
    //     // var count = $("#" + table.options.id).bootstrapTable('getData');
    //     // for(var i=0;i<count.length;i++) {
    //     //     $("#bootstrap-table").bootstrapTable("updateCell", {index: i, field: "buildingNumber", value: 213});
    //     // }
    //     // console.log(count);
    //
    //     bindDatetimepicker();
    //
    //
    //     // for (var k = 0; k < arr.length; k++) {
    //     //
    //     //     for (var k1 = 0; k1 < row.length; k1++) {
    //     //
    //     //         if (arr[k].id + "" == row[k1].index) {
    //     //             arr.splice(k, 1);
    //     //         }
    //     //     }
    //     // }
    //     //
    //     // for (var j = 0; j < arr.length; j++) {
    //     //     $("#" + box[j].id).val(arr[j].building);
    //     //     $("#" + box1[j].id).val(arr[j].floor);
    //     //
    //     // }
    //     //
    //     // arr = [];
    // }

    /* 主子表-提交 */
    function submitHandler() {
        var data = $("#form-add").serializeArray();
        console.log(JSON.stringify(data))
        // 校验:不填写信息时保存
        if (data.length == 3) {
            $.modal.alertWarning("请完善报表信息");
            return;
        }

        // 校验:浇筑日期不能为空
        var pourTime = document.getElementsByClassName("testff");
        for (var i = 0; i < pourTime.length; i++) {
            var pourTimeVal = $("#" + pourTime[i].id).val();
            if(pourTimeVal == ''){
                $.modal.alertWarning("请填写浇筑日期");
                return;
            }
        }

        $.operate.saveTab(prefix + '/save', data);
    }

    /* 校验:保留一位小数 */
    function clearNoNum(obj) {
        obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
        if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value = parseFloat(obj.value);
        }
    }

    /* 失焦校验:强度平均(Mpa) */
    function changeData(index) {
        if ($("#" + 'designLabel' + index).val() != '') {
            if (Number($("#" + 'averIntensity' + index).val()) > (Number($("#" + 'designLabel' + index).val()) - 5)) {
                // $.modal.msgWarning('不合格强度')
                $("#" + 'averIntensity' + index).css('border', ' 1px solid red');
            } else {

                $("#" + 'averIntensity' + index).css('border', ' 1px solid #E7EAEC');
            }
        }
    }

</script>
</body>
</html>
</script>